<template>
  <div>
    <!-- 年度开工率 -->
    <Echart
      :options="options"
      :id="'bottomLeftChart' + Math.random()"
      :height="height"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from "@/common/echart";

export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
    diycolor: {
      type: Object,
      default: () => ({
        lineColor: "#FFD330",
        barColor: "#7CCF72",
      }),
    },
    height: {
      type: String,
      default: "30vh",
    },
    colorArr:{
      type: Array,
      default: ()=>["#7CCF72", "#47AF3E", "#7CCF72 "],//前左一 前左二 顶部
    },
  },
  methods: {
    getEcharts3DBar(xAxisData, data, colorType, lineData) {
      var colorArr = [];
      if (colorType == "01") {
        colorArr =this.colorArr;
      } else {
        colorArr = ["#28c1c6", "#50dac0", "#87e8c7"];
      }
      var color = {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: colorArr[0],
          },
          {
            offset: 0.5,
            color: colorArr[0],
          },
          {
            offset: 0.5,
            color: colorArr[1],
          },
          {
            offset: 1,
            color: colorArr[1],
          },
        ],
      };
      var barWidth = 30;
      var constData = [];
      var showData = [];
      data.filter(function (item) {
        if (item) {
          constData.push(1);
          showData.push(item);
        } else {
          constData.push(0);
          showData.push({
            value: 1,
            itemStyle: {
              normal: {
                borderColor: "rgba(0,0,0,0)",
                borderWidth: 2,
                color: "rgba(0,0,0,0)",
              },
            },
          });
        }
      });
      return {
        legend: {
          data: ["数据", "计划贯通", "贯通率"],
          textStyle: {
            color: "#B4B4B4",
          },
          top: "0%",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var str = params[0].axisValue + "：";
            params.filter(function (item) {
              if (item.componentSubType == "bar") {
                str += "<br/>" + item.seriesName + "：" + item.value;
              }
            });
            return str;
          },
        },
        grid: {
          left: "3%", //图表距边框的距离
          right: "3%",
          top: "5%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          data: xAxisData,
          axisTick: {
            show: true,
          },
        },
        yAxis: {
          axisTick: {
            show: true,
          },
          axisLine: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
        },
        series: [
          {
            z: 4,
            data: [40, 30, 40, 50, 60],
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: "dotted", //'dotted'虚线 'solid'实线
                },
              },
            },
          },
          {
            z: 1,
            name: "数据",
            type: "bar",
            barWidth: barWidth,
            barGap: "0%",
            data: data,
            itemStyle: {
              normal: {
                color: color,
              },
            },
          },
          {
            z: 2,
            name: "数据",
            type: "pictorialBar",
            data: constData,
            symbol: "diamond",
            symbolOffset: ["0%", "50%"],
            symbolSize: [barWidth, 10],
            itemStyle: {
              normal: {
                color: color,
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 3,
            name: "数据",
            type: "pictorialBar",
            symbolPosition: "end",
            data: showData,
            symbol: "diamond",
            symbolOffset: ["0%", "-50%"],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
              normal: {
                borderColor: colorArr[2],
                borderWidth: 2,
                color: colorArr[2],
              },
            },
            tooltip: {
              show: false,
            },
          },
        ],
      };
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = this.getEcharts3DBar(
          newData.category,
          newData.barData,
          "01",
           newData.lineData,
        );
        // this.options = {
        //   title: {
        //     text: "",
        //   },
        //   tooltip: {
        //     trigger: "axis",
        //     backgroundColor: "rgba(255,255,255,0.1)",
        //     axisPointer: {
        //       type: "shadow",
        //       label: {
        //         show: true,
        //         backgroundColor: "#7B7DDC",
        //       },
        //     },
        //   },
        //   legend: {
        //     data: ["计划贯通", "贯通率"],
        //     textStyle: {
        //       color: "#B4B4B4",
        //     },
        //     top: "0%",
        //   },
        //   grid: {
        //     x: "8%",
        //     width: "88%",
        //     y: "4%",
        //   },
        //   xAxis: {
        //     data: newData.category,
        //     axisLine: {
        //       lineStyle: {
        //         color: "#B4B4B4",
        //       },
        //     },
        //     axisTick: {
        //       show: false,
        //     },
        //   },
        //   yAxis: [
        //     {
        //       splitLine: { show: false },
        //       axisLine: {
        //         lineStyle: {
        //           color: "#B4B4B4",
        //         },
        //       },

        //       axisLabel: {
        //         formatter: "{value} ",
        //       },
        //     },
        //     {
        //       splitLine: { show: false },
        //       axisLine: {
        //         lineStyle: {
        //           color: "#B4B4B4",
        //         },
        //       },
        //       axisLabel: {
        //         formatter: "{value} ",
        //       },
        //     },
        //   ],
        //   series: [
        //     {
        //       name: "贯通率",
        //       type: "line",
        //       smooth: true,
        //       showAllSymbol: true,
        //       symbol: "emptyCircle",
        //       symbolSize: 8,
        //       yAxisIndex: 1,
        //       itemStyle: {
        //         normal: {
        //           color: this.diycolor.lineColor, //"#FFD330"
        //         },
        //       },
        //       data: newData.rateData,
        //     },
        //     // {
        //     //   name: "计划贯通",
        //     //   type: "bar",
        //     //   barGap: "-100%",
        //     //   barWidth: 10,
        //     //   itemStyle: {
        //     //     normal: {
        //     //       barBorderRadius: 5,
        //     //       color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //     //         { offset: 0, color: this.diycolor.barColor },
        //     //         { offset: 0.2, color: this.diycolor.barColor },
        //     //         { offset: 1, color: this.diycolor.barColor },
        //     //       ]),
        //     //     },
        //     //   },
        //     //   z: -12,
        //     //   data: newData.lineData,
        //     // },
        //     {
        //       type: "pictorialBar",
        //       name: "计划贯通",
        //       z: 10,
        //       data: headData
        //     },
        //     {
        //       type: "bar",
        //       name: "reference bar",
        //       barGap: "-100%",
        //       // symbol: 'image://' + params.picture, // 图片自己切或者让UI设计切喔
        //       symbolOffset: [0, 0],
        //       z: 2,
        //       itemStyle: {
        //         // 有图就别用渐变了哈，图片更真实
        //         color: {
        //           x: 1,
        //           y: 0,
        //           x2: 0,
        //           y2: 0,
        //           type: "linear",
        //           global: false,
        //           colorStops: [
        //             { offset: 0, color: "#bd530a" },
        //             { offset: 0.5, color: "#bd530a" },
        //             { offset: 0.5, color: "#ca7e06" },
        //             { offset: 1, color: "#ca7e06" },
        //           ],
        //         },
        //       },
        //     data: [20, 50,30,10,40],
        //     },
        //     {
        //       type: "pictorialBar",
        //       name: "joy",
        //       barGap: "-100%",
        //       z: 3,
        //       data:barData,
        //     },
        //   ],
        // };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>